<template>
  <div>
    <el-row style="margin: -20px auto 10px auto;width: 100%;text-align: center;background-color: white;padding: 10px;">
      <div>
        <el-button type="primary" @click="getTIme('01')">当日</el-button>
        <el-button type="primary" @click="getTIme('02')">本周</el-button>
        <el-button type="primary" @click="getTIme('03')">本月</el-button>
        <el-button type="primary" @click="diyTime=!diyTime">自定义</el-button>
      </div>
      <div v-show="diyTime" class="block" style="float: right;margin-top: -37px">
        <span class="demonstration"></span>
        <el-date-picker
          v-model="time"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timeChange">
        </el-date-picker>
      </div>
      <!--<el-button type="primary" @click="query('04')">自定义</el-button>-->
    </el-row>
  </div>
  
</template>
<script>
  export default {
    data() {
      return {
        time: '',
        diyTime: false,
        adData: {},
        startTime: formatTime(new Date(), 'yyyy-MM-dd'),
        endTime: formatTime(new Date(), 'yyyy-MM-dd')

      }
    },
    methods: {
      getTIme(type) {
        let date = new Date()
        if (type === '02') {
          let weekday = date.getDay() || 7;
          date.setDate(date.getDate() - weekday + 1);
          this.startTime = formatTime(date, 'yyyy-MM-dd')
        } else if (type === '03') {
          date.setDate(1)
          this.startTime = formatTime(date, 'yyyy-MM-dd')
        }
        this.query()
      },
      timeChange(val) {
        this.startTime = formatTime(val[0], 'yyyy-MM-dd')
        this.endTime = formatTime(val[1], 'yyyy-MM-dd')
        console.log(this.startTime)
        console.log(this.endTime)
      },
      query() {
        console.log(this.startTime)
        console.log(this.endTime)
        let queryTime = {"startTime": new Date(this.startTime).getTime(), "endTime": new Date(this.endTime).getTime()}
        getAdDate(queryTime).then(response => {
          this.adData = response.data.data.data
        })
        this.queryTable()
      },
      queryTable() {

        let queryTime = {"startTime": new Date(this.startTime).getTime(), "endTime": new Date(this.endTime).getTime()}
        getAdTable(queryTime).then(response => {
          this.adData = response.data.data.data
        })
      }
    },
    computed: {
      successRate: function () {
        return (100 - (this.adData.playFail * 100 / this.adData.playTotalCount).toFixed(2))
      },
      income: function () {
        return (this.adData.playSuccess / 100)
      }
    },
    mounted() {
      this.query()
    }
  }
</script>
<style scoped>
</style>
